<template>
  <div class="homeContainer">
    <div class="title">dashborad</div>
    <div class="chartsContainer">
      <div class="row1">
        <div class="chart1 flexCenter">
          <div class="titie">分类占比</div>
          <div id="positionTop5" class="chart_c"></div>
        </div>
        <div class="chart2 flexCenter">
          <div class="titie">活跃度</div>
          <div id="activeScore" class="chart_c"></div>
        </div>
      </div>
      <div class="row2"></div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  onMounted,
  defineComponent,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  name: "Home",
  setup() {
    const { proxy } = getCurrentInstance() as any;

    // 图表一数据和逻辑
    let positionTop5_option = {
      barWidth: 20,
      color: "#4CA6FE",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      xAxis: {
        type: "category",
        data: ["特效交互", "vue3.x", "typescript", "实用技巧", "nodeJs"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70],
          type: "bar",
          itemStyle: {
            normal: {
              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7BAAF3" }, // 柱图渐变色
                { offset: 1, color: "#9966FD" }, // 柱图渐变色
              ]),
            },
            emphasis: {
              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7BAAF3" }, // 柱图高亮渐变色
                { offset: 1, color: "#9966FD" }, // 柱图高亮渐变色
              ]),
            },
          },
        },
      ],
    };
    let initChart1 = () => {
      let chartDom = document.getElementById("positionTop5");
      let chart1 = proxy.$echarts.init(chartDom);
      chart1.setOption(positionTop5_option);
    };

    // 图表二数据和逻辑
    let activeOption = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
          itemStyle: {
            normal: {
              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7BAAF3" }, // 柱图渐变色
                { offset: 1, color: "#9966FD" }, // 柱图渐变色
              ]),
            },
            emphasis: {
              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7BAAF3" }, // 柱图高亮渐变色
                { offset: 1, color: "#9966FD" }, // 柱图高亮渐变色
              ]),
            },
          },
        },
      ],
    }
    let initChart2 = () => {
      let chartDom = document.getElementById("activeScore");
      let chart1 = proxy.$echarts.init(chartDom);
      chart1.setOption(activeOption);
    };
    onMounted(() => {
      initChart1();
      initChart2()
    });

    return {
      initChart1,
    };
  },
});
</script>

<style lang="scss">
@import "~@/styles/color.scss";
@import "~@/styles/mixin.scss";
.homeContainer {
  padding: 20px;
  min-width: 800px;
  .title {
    color: $titleColor;
    font-size: 32px;
    margin: 30px 0px;
  }
  .chartsContainer {
    .row1 {
      display: flex;
      justify-content: space-between;
      .flexCenter{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .flexNormal{
          display: flex;
          padding: 0;
          justify-content: center;
      }
      .titie {
          color: $titleColor;
          font: {
            size:22px;
            weight:600
          }
          text-align: left;
      }
      .chart1 {
        @include glassStyle(500px, 0.3);
        width: 400px;
        height: 300px;
        border-radius: 20px;
        margin-right: 10px;
        .chart_c {
          width: 380px;
          height: 240px;
          @extend .flexNormal;
        }
      }
      .chart2 {
        @include glassStyle(500px, 0.3);
        width: 320px;
        height: 300px;
        border-radius: 20px;
        .chart_c {
          width: 280px;
          height: 240px;
          @extend .flexNormal;
        }
      }
    }
  }
}
</style>